<template>
  <div class="home">
    <m-header></m-header>
    <!-- <rem></rem>
    <div id="open_live2d">召唤蕾姆</div> -->
    <m-content></m-content>
    <m-footer></m-footer>
  </div>
</template>

<script>
import MHeader from '@/components/header/m-header.vue';
import MContent from '@/components/content/m-content.vue';
import MFooter from '@/components/footer/m-footer.vue';
// import Rem from '@/components/rem/rem.vue';

export default {
  name: 'Home',
  components: {
    MHeader,
    MContent,
    MFooter,
    // Rem,
  },
  data() {
    return {
      pics: ['./img/scissors.png', './img/stone.png', './img/cloth.png'],
      virus: './img/virus.png',
    };
  },

};
</script>
<style lang="less" scoped>

@keyframes playX {
  from {
    background-position-y: 0px;
  }
  20% {
    background-position-y: 5px;
  }
  30% {
    background-position-y: 8px;
  }
  50% {
    background-position-y: 10px;
  }
  60% {
    background-position-y: 8px;
  }
  80% {
    background-position-y: 5px;
  }
  to {
    background-position-y: 0px;
  }
}

/*游戏介绍对齐分布*/
.gameIntro {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  height: 50%;
  background: rgb(255, 249, 249);
  font-size: 0.75rem;
  margin: auto;
}

.gameIntro .bold {
  text-align: center;
}

.text {
  font-size: 1.75rem;
  margin: 0.625rem;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5625rem;
  height: 1.5625rem;
  font-size: 1.75rem;
  margin: 0.3125rem 0.625rem;
  padding: 0.3125rem;
  border: 1px solid;
  border-radius: 50%;
  cursor: pointer;
}

.close:hover {
  background: #eee;
  filter: brightness(0.7);
}

/*页脚固定*/
.footer {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
}
</style>
